/**
 * WMS通用样式 - BEM命名规范实现
 * 
 * 采用BEM (Block Element Modifier) 命名方法论
 * 确保组件样式的一致性和可维护性
 */

/* ================================
 * 通用组件样式基类
 * ================================ */

/* WMS组件基础样式 */
.wms-component {
  box-sizing: border-box;
  font-family: var(--wms-font-family);
  font-size: var(--wms-font-size-sm);
  line-height: var(--wms-line-height-md);
  color: var(--wms-text-color-primary);
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

/* ================================
 * 布局组件样式
 * ================================ */

/* 页面容器 */
.wms-page {
  min-height: 100vh;
  background-color: var(--wms-bg-light);
  
  &__header {
    background-color: var(--wms-bg-white);
    border-bottom: 1px solid var(--wms-border-color-light);
    padding: var(--wms-padding-md) var(--wms-padding-lg);
  }
  
  &__content {
    padding: var(--wms-padding-lg);
    min-height: calc(100vh - 120px);
  }
  
  &__footer {
    background-color: var(--wms-bg-white);
    border-top: 1px solid var(--wms-border-color-light);
    padding: var(--wms-padding-md) var(--wms-padding-lg);
    text-align: center;
    color: var(--wms-text-color-secondary);
  }
}

/* 内容区域 */
.wms-content {
  &--center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  &--full-height {
    min-height: 100vh;
  }
}

/* 卡片容器 */
.wms-card {
  background-color: var(--wms-card-background);
  border: 1px solid var(--wms-card-border-color);
  border-radius: var(--wms-card-border-radius);
  box-shadow: var(--wms-card-shadow);
  padding: var(--wms-card-padding);
  margin-bottom: var(--wms-margin-lg);
  transition: var(--wms-transition-base);
  
  &:hover {
    box-shadow: var(--wms-card-shadow-hover);
  }
  
  &__header {
    border-bottom: 1px solid var(--wms-border-color-light);
    padding-bottom: var(--wms-padding-md);
    margin-bottom: var(--wms-margin-md);
    
    &-title {
      font-size: var(--wms-font-size-lg);
      font-weight: var(--wms-font-weight-medium);
      color: var(--wms-text-color-primary);
      margin: 0;
    }
    
    &-extra {
      float: right;
    }
  }
  
  &__body {
    padding: 0;
  }
  
  &__footer {
    border-top: 1px solid var(--wms-border-color-light);
    padding-top: var(--wms-padding-md);
    margin-top: var(--wms-margin-md);
    text-align: right;
  }
  
  &--shadow {
    box-shadow: var(--wms-shadow-md);
  }
  
  &--bordered {
    border: 2px solid var(--wms-border-color);
  }
  
  &--hoverable {
    cursor: pointer;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--wms-shadow-lg);
    }
  }
}

/* ================================
 * 表格组件样式
 * ================================ */

.wms-table {
  width: 100%;
  background-color: var(--wms-bg-white);
  border-radius: var(--wms-border-radius-md);
  overflow: hidden;
  box-shadow: var(--wms-card-shadow);
  
  &__header {
    background-color: var(--wms-table-header-bg);
    color: var(--wms-table-header-color);
    font-weight: var(--wms-font-weight-medium);
    
    &-cell {
      padding: var(--wms-table-cell-padding);
      border-bottom: 2px solid var(--wms-table-border-color);
      text-align: left;
      
      &--center {
        text-align: center;
      }
      
      &--right {
        text-align: right;
      }
    }
  }
  
  &__body {
    &-row {
      transition: var(--wms-transition-fast);
      
      &:hover {
        background-color: var(--wms-table-row-hover-bg);
      }
      
      &--selected {
        background-color: var(--wms-primary-color-light);
      }
      
      &--disabled {
        opacity: 0.5;
        background-color: var(--wms-bg-disabled);
        cursor: not-allowed;
      }
      
      &--clickable {
        cursor: pointer;
      }
    }
    
    &-cell {
      padding: var(--wms-table-cell-padding);
      border-bottom: 1px solid var(--wms-table-border-color);
      
      &--center {
        text-align: center;
      }
      
      &--right {
        text-align: right;
      }
      
      &--ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
  &__actions {
    display: flex;
    gap: var(--wms-spacing-xs);
    justify-content: center;
    
    &--left {
      justify-content: flex-start;
    }
    
    &--right {
      justify-content: flex-end;
    }
  }
  
  &__empty {
    text-align: center;
    padding: var(--wms-padding-xl);
    color: var(--wms-text-color-placeholder);
    
    &-icon {
      font-size: 48px;
      margin-bottom: var(--wms-margin-md);
      opacity: 0.5;
    }
    
    &-text {
      font-size: var(--wms-font-size-md);
    }
  }
  
  &--bordered {
    border: 1px solid var(--wms-table-border-color);
    
    .wms-table__header-cell,
    .wms-table__body-cell {
      border-right: 1px solid var(--wms-table-border-color);
      
      &:last-child {
        border-right: none;
      }
    }
  }
  
  &--striped {
    .wms-table__body-row:nth-child(even) {
      background-color: var(--wms-bg-lighter);
    }
  }
  
  &--small {
    .wms-table__header-cell,
    .wms-table__body-cell {
      padding: var(--wms-padding-xs) var(--wms-padding-sm);
    }
  }
  
  &--large {
    .wms-table__header-cell,
    .wms-table__body-cell {
      padding: var(--wms-padding-lg) var(--wms-padding-xl);
    }
  }
}

/* ================================
 * 表单组件样式
 * ================================ */

.wms-form {
  &__item {
    margin-bottom: var(--wms-form-item-margin-bottom);
    
    &--inline {
      display: inline-block;
      margin-right: var(--wms-margin-md);
      margin-bottom: var(--wms-margin-md);
    }
    
    &--required {
      .wms-form__label::before {
        content: '*';
        color: var(--wms-error-color);
        margin-right: 4px;
      }
    }
    
    &--error {
      .wms-form__control {
        border-color: var(--wms-error-color);
        box-shadow: 0 0 0 2px var(--wms-error-color-light);
      }
      
      .wms-form__error-message {
        display: block;
      }
    }
  }
  
  &__label {
    display: block;
    margin-bottom: var(--wms-form-label-margin-bottom);
    color: var(--wms-form-label-color);
    font-weight: var(--wms-font-weight-medium);
    
    &--left {
      text-align: left;
    }
    
    &--center {
      text-align: center;
    }
    
    &--right {
      text-align: right;
    }
  }
  
  &__control {
    width: 100%;
    height: var(--wms-form-control-height);
    padding: 0 var(--wms-padding-md);
    border: 1px solid var(--wms-border-color);
    border-radius: var(--wms-border-radius-base);
    background-color: var(--wms-bg-white);
    color: var(--wms-text-color-primary);
    font-size: var(--wms-font-size-sm);
    transition: var(--wms-transition-base);
    
    &:hover {
      border-color: var(--wms-border-color-hover);
    }
    
    &:focus {
      outline: none;
      border-color: var(--wms-primary-color);
      box-shadow: 0 0 0 2px var(--wms-primary-color-light);
    }
    
    &:disabled {
      background-color: var(--wms-bg-disabled);
      color: var(--wms-text-color-disabled);
      cursor: not-allowed;
    }
    
    &--small {
      height: var(--wms-form-control-height-sm);
      padding: 0 var(--wms-padding-sm);
      font-size: var(--wms-font-size-xs);
    }
    
    &--large {
      height: var(--wms-form-control-height-lg);
      padding: 0 var(--wms-padding-lg);
      font-size: var(--wms-font-size-md);
    }
  }
  
  &__help-text {
    margin-top: var(--wms-margin-xs);
    color: var(--wms-text-color-secondary);
    font-size: var(--wms-font-size-xs);
  }
  
  &__error-message {
    display: none;
    margin-top: var(--wms-margin-xs);
    color: var(--wms-error-color);
    font-size: var(--wms-font-size-xs);
  }
  
  &__actions {
    margin-top: var(--wms-margin-xl);
    text-align: right;
    
    &--left {
      text-align: left;
    }
    
    &--center {
      text-align: center;
    }
    
    &--sticky {
      position: sticky;
      bottom: 0;
      background-color: var(--wms-bg-white);
      border-top: 1px solid var(--wms-border-color-light);
      padding: var(--wms-padding-md);
      margin: var(--wms-margin-lg) calc(-1 * var(--wms-padding-lg)) 0;
    }
  }
}

/* ================================
 * 按钮组件样式
 * ================================ */

.wms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--wms-button-height);
  padding: var(--wms-button-padding);
  border: 1px solid transparent;
  border-radius: var(--wms-button-border-radius);
  background-color: var(--wms-bg-white);
  color: var(--wms-text-color-primary);
  font-size: var(--wms-font-size-sm);
  font-weight: var(--wms-font-weight-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--wms-transition-base);
  user-select: none;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--wms-shadow-sm);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--wms-primary-color-light);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  
  &__icon {
    margin-right: var(--wms-margin-xs);
    
    &--right {
      margin-right: 0;
      margin-left: var(--wms-margin-xs);
    }
    
    &--only {
      margin: 0;
    }
  }
  
  &__loading {
    margin-right: var(--wms-margin-xs);
    animation: wms-spin 1s linear infinite;
  }
  
  /* 按钮类型 */
  &--primary {
    background-color: var(--wms-primary-color);
    border-color: var(--wms-primary-color);
    color: var(--wms-text-color-white);
    
    &:hover {
      background-color: var(--wms-primary-color-hover);
      border-color: var(--wms-primary-color-hover);
    }
    
    &:active {
      background-color: var(--wms-primary-color-active);
      border-color: var(--wms-primary-color-active);
    }
  }
  
  &--success {
    background-color: var(--wms-success-color);
    border-color: var(--wms-success-color);
    color: var(--wms-text-color-white);
    
    &:hover {
      background-color: var(--wms-success-color-hover);
      border-color: var(--wms-success-color-hover);
    }
  }
  
  &--warning {
    background-color: var(--wms-warning-color);
    border-color: var(--wms-warning-color);
    color: var(--wms-text-color-white);
    
    &:hover {
      background-color: var(--wms-warning-color-hover);
      border-color: var(--wms-warning-color-hover);
    }
  }
  
  &--danger {
    background-color: var(--wms-error-color);
    border-color: var(--wms-error-color);
    color: var(--wms-text-color-white);
    
    &:hover {
      background-color: var(--wms-error-color-hover);
      border-color: var(--wms-error-color-hover);
    }
  }
  
  &--info {
    background-color: var(--wms-info-color);
    border-color: var(--wms-info-color);
    color: var(--wms-text-color-white);
    
    &:hover {
      background-color: var(--wms-info-color-hover);
      border-color: var(--wms-info-color-hover);
    }
  }
  
  /* 按钮变体 */
  &--plain {
    background-color: transparent;
    border-color: var(--wms-border-color);
    
    &.wms-button--primary {
      color: var(--wms-primary-color);
      border-color: var(--wms-primary-color);
      
      &:hover {
        background-color: var(--wms-primary-color-light);
      }
    }
  }
  
  &--text {
    background-color: transparent;
    border-color: transparent;
    
    &:hover {
      background-color: var(--wms-primary-color-light);
    }
  }
  
  &--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--wms-link-color);
    
    &:hover {
      color: var(--wms-link-color-hover);
      text-decoration: underline;
    }
  }
  
  /* 按钮尺寸 */
  &--small {
    height: var(--wms-button-height-sm);
    padding: var(--wms-button-padding-sm);
    font-size: var(--wms-font-size-xs);
  }
  
  &--large {
    height: var(--wms-button-height-lg);
    padding: var(--wms-button-padding-lg);
    font-size: var(--wms-font-size-md);
  }
  
  /* 按钮形状 */
  &--round {
    border-radius: calc(var(--wms-button-height) / 2);
  }
  
  &--circle {
    width: var(--wms-button-height);
    padding: 0;
    border-radius: 50%;
  }
  
  /* 按钮组 */
  &-group {
    display: inline-flex;
    
    .wms-button {
      border-radius: 0;
      border-right-width: 0;
      
      &:first-child {
        border-top-left-radius: var(--wms-button-border-radius);
        border-bottom-left-radius: var(--wms-button-border-radius);
      }
      
      &:last-child {
        border-top-right-radius: var(--wms-button-border-radius);
        border-bottom-right-radius: var(--wms-button-border-radius);
        border-right-width: 1px;
      }
      
      &:hover {
        z-index: 1;
        border-right-width: 1px;
      }
    }
  }
}

/* ================================
 * 分页组件样式
 * ================================ */

.wms-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wms-padding-lg) 0;
  
  &__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wms-pagination-item-size);
    height: var(--wms-pagination-item-size);
    margin: var(--wms-pagination-item-margin);
    border: 1px solid var(--wms-border-color);
    border-radius: var(--wms-border-radius-base);
    background-color: var(--wms-bg-white);
    color: var(--wms-text-color-primary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--wms-transition-base);
    
    &:hover {
      border-color: var(--wms-primary-color);
      color: var(--wms-primary-color);
    }
    
    &--active {
      background-color: var(--wms-pagination-active-bg);
      border-color: var(--wms-pagination-active-bg);
      color: var(--wms-pagination-active-color);
      
      &:hover {
        background-color: var(--wms-primary-color-hover);
        border-color: var(--wms-primary-color-hover);
      }
    }
    
    &--disabled {
      opacity: 0.5;
      cursor: not-allowed;
      
      &:hover {
        border-color: var(--wms-border-color);
        color: var(--wms-text-color-primary);
      }
    }
  }
  
  &__info {
    margin: 0 var(--wms-margin-md);
    color: var(--wms-text-color-secondary);
    font-size: var(--wms-font-size-sm);
  }
  
  &__sizes {
    margin-right: var(--wms-margin-md);
  }
  
  &__jumper {
    margin-left: var(--wms-margin-md);
    
    input {
      width: 50px;
      margin: 0 var(--wms-margin-xs);
    }
  }
  
  &--hidden {
    display: none;
  }
}

/* ================================
 * 状态标签样式
 * ================================ */

.wms-status-tag {
  display: inline-flex;
  align-items: center;
  height: var(--wms-tag-height);
  padding: var(--wms-tag-padding);
  border-radius: var(--wms-tag-border-radius);
  font-size: var(--wms-tag-font-size);
  font-weight: var(--wms-font-weight-medium);
  line-height: 1;
  
  &__icon {
    margin-right: 4px;
    font-size: 12px;
  }
  
  &__text {
    line-height: 1;
  }
  
  /* 状态类型 */
  &--primary {
    background-color: var(--wms-primary-color-light);
    color: var(--wms-primary-color-dark);
    border: 1px solid var(--wms-primary-color);
  }
  
  &--success {
    background-color: var(--wms-success-color-light);
    color: var(--wms-success-color-dark);
    border: 1px solid var(--wms-success-color);
  }
  
  &--warning {
    background-color: var(--wms-warning-color-light);
    color: var(--wms-warning-color-dark);
    border: 1px solid var(--wms-warning-color);
  }
  
  &--danger {
    background-color: var(--wms-error-color-light);
    color: var(--wms-error-color-dark);
    border: 1px solid var(--wms-error-color);
  }
  
  &--info {
    background-color: var(--wms-info-color-light);
    color: var(--wms-info-color-dark);
    border: 1px solid var(--wms-info-color);
  }
  
  /* 标签变体 */
  &--dark {
    &.wms-status-tag--primary {
      background-color: var(--wms-primary-color);
      color: var(--wms-text-color-white);
    }
    
    &.wms-status-tag--success {
      background-color: var(--wms-success-color);
      color: var(--wms-text-color-white);
    }
    
    &.wms-status-tag--warning {
      background-color: var(--wms-warning-color);
      color: var(--wms-text-color-white);
    }
    
    &.wms-status-tag--danger {
      background-color: var(--wms-error-color);
      color: var(--wms-text-color-white);
    }
    
    &.wms-status-tag--info {
      background-color: var(--wms-info-color);
      color: var(--wms-text-color-white);
    }
  }
  
  &--plain {
    background-color: transparent;
    
    &.wms-status-tag--primary {
      color: var(--wms-primary-color);
    }
    
    &.wms-status-tag--success {
      color: var(--wms-success-color);
    }
    
    &.wms-status-tag--warning {
      color: var(--wms-warning-color);
    }
    
    &.wms-status-tag--danger {
      color: var(--wms-error-color);
    }
    
    &.wms-status-tag--info {
      color: var(--wms-info-color);
    }
  }
  
  /* 标签尺寸 */
  &--small {
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
  }
  
  &--large {
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* ================================
 * 工具类样式
 * ================================ */

/* 文本对齐 */
.wms-text-left { text-align: left !important; }
.wms-text-center { text-align: center !important; }
.wms-text-right { text-align: right !important; }

/* 文本颜色 */
.wms-text-primary { color: var(--wms-text-color-primary) !important; }
.wms-text-secondary { color: var(--wms-text-color-secondary) !important; }
.wms-text-success { color: var(--wms-success-color) !important; }
.wms-text-warning { color: var(--wms-warning-color) !important; }
.wms-text-danger { color: var(--wms-error-color) !important; }
.wms-text-info { color: var(--wms-info-color) !important; }

/* 背景颜色 */
.wms-bg-white { background-color: var(--wms-bg-white) !important; }
.wms-bg-light { background-color: var(--wms-bg-light) !important; }
.wms-bg-primary { background-color: var(--wms-primary-color) !important; }
.wms-bg-success { background-color: var(--wms-success-color) !important; }
.wms-bg-warning { background-color: var(--wms-warning-color) !important; }
.wms-bg-danger { background-color: var(--wms-error-color) !important; }
.wms-bg-info { background-color: var(--wms-info-color) !important; }

/* 间距工具类 */
.wms-m-0 { margin: 0 !important; }
.wms-m-xs { margin: var(--wms-margin-xs) !important; }
.wms-m-sm { margin: var(--wms-margin-sm) !important; }
.wms-m-md { margin: var(--wms-margin-md) !important; }
.wms-m-lg { margin: var(--wms-margin-lg) !important; }
.wms-m-xl { margin: var(--wms-margin-xl) !important; }

.wms-p-0 { padding: 0 !important; }
.wms-p-xs { padding: var(--wms-padding-xs) !important; }
.wms-p-sm { padding: var(--wms-padding-sm) !important; }
.wms-p-md { padding: var(--wms-padding-md) !important; }
.wms-p-lg { padding: var(--wms-padding-lg) !important; }
.wms-p-xl { padding: var(--wms-padding-xl) !important; }

/* 显示/隐藏 */
.wms-hidden { display: none !important; }
.wms-visible { display: block !important; }

/* 动画 */
@keyframes wms-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wms-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wms-slide-in-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式工具类 */
@media (max-width: 768px) {
  .wms-hidden-mobile { display: none !important; }
  .wms-visible-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .wms-hidden-desktop { display: none !important; }
  .wms-visible-desktop { display: block !important; }
}